<template>
    <div>
        <el-dialog :title="(type == 0 ? '添加植物信息' : '编辑植物信息')" :visible="visible" :before-close="handleClose">
            <div v-if="(type == 0)">
                <el-form :model="form" :rules="rules">
                    <el-form-item label="植物名称" label-width="120px" prop="totanyName">
                        <el-input v-model="form.totanyName" autocomplete="on"></el-input>
                    </el-form-item>
                    <el-form-item label="植物别名" label-width="120px" prop="anotherName">
                        <el-input v-model="form.anotherName" autocomplete="on"></el-input>
                    </el-form-item>
                    <el-form-item label="植物图片" label-width="120px" prop="picture">
                        <el-upload :limit="1" name="file" action="/api/common/upload" list-type="picture-card"
                            :auto-upload="true" :before-upload="beforeUpload" :on-success="handleSuccess"
                            :on-exceed="onExceed" :on-remove="handleRemove" :file-list="fileList" multiple>
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                        <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                        @click="handleDownload(file)">
                                        <i class="el-icon-download"></i>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                        @click="handleRemove(file)">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>
                    <el-form-item label="植物描述" label-width="120px" prop="totancyCont">
                        <el-input type="textarea" :rows="10" v-model="form.totancyCont" autocomplete="on"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button type="primary" @click="savePlant">添加</el-button>
                </div>
            </div>
            <div v-else>
                <el-form :model="form" :rules="rules">
                    <el-form-item label="植物名称" label-width="120px" prop="totanyName">
                        <el-input v-model="formData.totanyName" autocomplete="on"></el-input>
                    </el-form-item>
                    <el-form-item label="植物别名" label-width="120px" prop="anotherName">
                        <el-input v-model="formData.anotherName" autocomplete="on"></el-input>
                    </el-form-item>
                    <el-form-item label="植物图片" label-width="120px" prop="picture">
                        <el-card :body-style="{ padding: '0px' }">
                            <img :src="imageUrl" class="image">
                        </el-card>
                    </el-form-item>
                    <el-form-item label="植物描述" label-width="120px" prop="totancyCont">
                        <el-input type="textarea" :rows="10" v-model="formData.totancyCont"
                            autocomplete="on"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button type="primary" @click="savePlant">修改</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { save } from '@/api/plantApi';
import router from '@/router';
import { getPicture } from '@/api';
const options = {
    props: ["visible", "type", "formData"],
    data() {
        return {
            dialogVisible: false,
            dialogImageUrl: null,
            disabled: false,
            form: {
                adminId: 1,
                anotherName: "",
                fileName: "",
                pictureUrl: "",
                src: "",
                totancyCont: "",
                totanyName: ""

            },
            rules: {
                totanyName: [
                    { required: true, message: '请输入植物名称', trigger: 'blur' }
                ],
                picture: [
                    { required: true, message: '请上传图片', trigger: 'blur' }
                ],
                totancyCont: [
                    { required: true, message: '请输入植物信息', trigger: 'blur' },
                    { min: "20", message: '至少输入20个字符的描述信息', trigger: 'blur' }
                ]
            },
            fileList: [],
            imageUrl: null
        }
    },
    watch: {
        formData() {
            console.log("->formData 改变了");
            this.handleLoadImage();
            this.getImage(this.plant);
        }
    },
    computed: {
        admin() {
            return this.$store.state.admin ?? JSON.parse(localStorage.getItem("admin"));
        }
    },
    created() {
        console.log(this.admin);
        this.form.adminId = this.admin.adminId;
        if (this.admin == null) router.push("/backend/login");
        this.init();
    },
    methods: {
        init() {

        },
        beforeUpload(file) {
            console.log(file);
            const isJPG = file.type === 'image/jpeg';
            const isLt4M = file.size / 1024 / 1024 < 4;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt4M) {
                this.$message.error('上传头像图片大小不能超过 4MB!');
            }
            return isJPG && isLt4M;
        },
        handleSuccess(res) {
            console.log("success:upload");
            this.form.pictureUrl = res.data;
            this.form.fileName = res.data;
            getPicture(res.data).then((resp) => {
                this.imageUrl = URL.createObjectURL(resp.data);
            })
            // console.log(file);
        },
        handleLoadImage() {
            let that = this;
            getPicture(this.formData.pictureUrl).then((resp) => {
                that.imageUrl = URL.createObjectURL(resp.data);
            })
            // console.log(file);
        },
        // getImage(item) {
        //     let that = this;
        //     getPicture(item.pictureUrl).then((resp) => {
        //         let url = window.URL.createObjectURL(resp.data);
        //         that.imgSrc = url;
        //         // console.log(url);
        //     })
        // },
        onExceed() {
            // console.log(files);
            // console.log(fileList);
            this.$message.warning("只能上传一张图片！");
        },
        handleRemove(file, fileList) {
            console.log("remove:" + file + fileList);
        },
        handleClose() {
            this.$confirm('确认关闭？')
                .then(() => {
                    this.close();
                })
                .catch(() => { });
        },
        close() {
            // console.log("关闭");
            this.$emit('close', null);
        },
        savePlant() {
            if (this.form.fileName == "") return this.$message.error("缺少图片，不能保存");
            let that = this;
            save(this.form)
                .then((resp) => {
                    if (resp.data.code === 1) {
                        that.$message.success("添加植物成功");
                    } else {
                        that.$message.error("添加植物失败");
                    }
                }).catch()
            this.close();
        },
        updatePlant() {
            this.close();
        }
    }
}

export default options;
</script>
<style>
.__img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    cursor: pointer;
}
</style>